<template>
  <div class="ScoreDetails">
    <div class="container">
      <div class="title">
        <span class="details">评分详情</span>
        <!-- <span class="toList">返回评分列表</span> -->
        <router-link to="/score-manage" class="toList"
          >返回评分列表</router-link
        >
      </div>
      <div class="content">
        <div class="topBtn">
          <span></span>
          <div class="scoreName">
            <span>评分表名称：</span>
            <span>{{ this.detailName }}</span>
          </div>
          <div class="Btn">
            <button @click="deleteItem">删除</button>
            <button @click="toEdit">编辑</button>
          </div>
        </div>
        <div class="tableContent" style="border-collapse: collapse">
          <span>评分表</span>
          <div class="table">
            <table
              cellspacing="0"
              cellpadding="0"
              style="border-collapse: collapse"
            >
              <thead>
                <tr style="height: 55px; background: #e6ebff; font-size: 14px">
                  <td style="width: 338px">能力</td>
                  <td style="width: 500px">能力细化</td>
                  <td style="width: 160px">总分</td>
                  <td style="width: 150px">阶段性考核占比(%)</td>
                  <td style="width: 150px">过程性考核占比(%)</td>
                  <td style="width: 377px">显示</td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in tableList" :key="item.id">
                  <td>{{ item.title }}</td>
                  <td>
                    <table
                      class="table1"
                      cellspacing="0"
                      cellpadding="0"
                      style="border-collapse: collapse"
                    >
                      <tr
                        v-for="item2 in item.evaluationdetailitemsubVoList"
                        :key="item2.id"
                      >
                        <td style="width: 200px">
                          <span>编号 {{ item2.ordernum }}</span>
                          <!-- <span>{{item.id}}</span> -->
                        </td>
                        <td style="line-height: 43px; width: 300px">
                          (ID:{{ item2.id }}) {{ item2.name }}
                        </td>
                      </tr>
                    </table>
                  </td>

                  <td>
                    <table
                      class="table1"
                      cellspacing="0"
                      cellpadding="0"
                      style="border-collapse: collapse"
                    >
                      <tr
                        v-for="item2 in item.evaluationdetailitemsubVoList"
                        :key="item2.id"
                      >
                        <td style="line-height: 43px; width: 160px">
                          {{ item2.total }}
                        </td>
                      </tr>
                    </table>
                  </td>
                  <td>
                    <table
                      class="table2"
                      cellspacing="0"
                      cellpadding="0"
                      style="border-collapse: collapse"
                    >
                      <tr
                        v-for="item3 in item.evaluationdetailitemsubVoList"
                        :key="item3.id"
                      >
                        <td style="width: 100%; line-height: 43px">
                          <span>{{
                            item3.evaluationdetailitemsubList[0].type === 1
                              ? item3.evaluationdetailitemsubList[0].percentage
                              : ""
                          }}</span>
                          <span
                            v-if="item3.evaluationdetailitemsubList.length > 1"
                          >
                            {{
                              item3.evaluationdetailitemsubList[1].type === 1
                                ? item3.evaluationdetailitemsubList[1]
                                    .percentage
                                : ""
                            }}
                          </span>
                        </td>
                      </tr>
                    </table>
                  </td>
                  <td>
                    <table
                      class="table2"
                      cellspacing="0"
                      cellpadding="0"
                      style="border-collapse: collapse"
                    >
                      <tr
                        v-for="item3 in item.evaluationdetailitemsubVoList"
                        :key="item3.id"
                      >
                        <td style="width: 100%; line-height: 43px">
                          <span>{{
                            item3.evaluationdetailitemsubList[0].type === 2
                              ? item3.evaluationdetailitemsubList[0].percentage
                              : ""
                          }}</span>
                          <span
                            v-if="item3.evaluationdetailitemsubList.length > 1"
                          >
                            {{
                              item3.evaluationdetailitemsubList[1].type === 2
                                ? item3.evaluationdetailitemsubList[1]
                                    .percentage
                                : ""
                            }}
                          </span>
                        </td>
                      </tr>
                    </table>
                  </td>
                  <td>
                    <span v-if="item.type === 1"> 直方图 </span>
                    <span v-else-if="item.type === 2"> 5边雷达图 </span>
                    <span v-else-if="item.type === 4"> 6边雷达图 </span>
                    <span v-else-if="item.type === 3"> 元饼图</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="roleList">
          <span>项目角色表</span>
          <div class="role">
            <div v-for="item in roleList" :key="item.id">
              ({{ item.id }})
              {{ item.name }}
            </div>
          </div>
        </div>
        <!-- <div class="showSetting">
          <span>显示设置</span>
          <div class="settingTable">
            <table>
              <thead>
                <tr>
                  <td>序号</td>
                  <td v-for="(item, index) in settingList" :key="item.id">
                    {{ index + 1 }}
                  </td>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>编号</td>
                  <td v-for="e in settingList" :key="e.id">
                    {{ e.ordernum }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div> -->
      </div>
    </div>
    <EditScoreList ref="child" @getDetails="getDetails"></EditScoreList>
  </div>
</template>

<script>
import {getScoreListDetails, deleteScoreList} from '@/api/scoreManage/score.js';
import EditScoreList from './EditScoreList.vue';
export default {
  data() {
    return {
      list: [
        {id: 0, name: '素质能力(ID)', showUl: false, children: [{id: '001', val1: '', val2: '', val3: ''}, {id: '002', val1: '', val2: '30', val3: ''}, {id: '003', val1: '', val2: '', val3: ''}, {id: '004', val1: '', val2: '', val3: ''}, {id: '005', val1: '', val2: '', val3: ''}]
        },
        {id: 1, name: '沟通能力(ID)', showUl: false, children: [{id: '001', val1: '', val2: '', val3: ''}]},
        {id: 2, name: '知识能力(ID)', showUl: false, children: [{id: '001', val1: '', val2: '', val3: ''}]}
      ],
      detailName: '',
      tableList: [],
      roleList: [],
      settingList: [],
      currentId: 0
    };
  },
  methods: {
    async getDetails(id) {
      const res = await getScoreListDetails({id});
      //   console.log('获取详情1', res.data.evaluationdetailitemVoList);
      // console.log('获取详情table', res);
      this.detailName = res.data.name;
      this.tableList = res.data.evaluationdetailitemVoList;
      this.roleList = res.data.roleNameList;
      this.settingList = res.data.evaluationdetailpicList;
    },
    // 删除
    deleteItem() {
      //   console.log(111);
      // console.log(this.currentId);
      this.$confirm('确定要删除该条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await deleteScoreList({id: this.currentId});
        // console.log(res);
        if (res.code) {
          this.$message({
            showClose: true,
            type: 'success',
            message: '删除成功!'
          });
          this.$router.replace('/score-manage');
        } else {
          // this.$message.error('删除失败!');
          this.$message({
            showClose: true,
            message: '删除失败!',
            type: 'error'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          showClose: true,
          message: '已取消删除'
        });
      });
    },
    // 点击编辑
    toEdit() {
      // console.log(this.$route.query);
      this.$refs.child.openEdit(this.currentId);
    //   this.$router.push('/editScoreList');
    }
  },
  created() {
    // console.log(this.$route);
    this.getDetails(this.$route.query.id);
    this.currentId = this.$route.query.id;
  },
  components: {
    EditScoreList
  }
};
</script>

<style lang="less" scoped>
* {
  font-family: PingFangSC-Regular, PingFang SC;
}

.ScoreDetails {
  display: flex;
  justify-content: center;
  font-family: PingFangSC-Regular, PingFang SC;
  .container {
    width: 98%;
    // height: 100vh;
    margin-top: 14px;
    margin-bottom: 30px;
    .title {
      display: flex;
      justify-content: space-between;
      .details {
        display: inline-block;
        height: 55px;
        width: 140px;
        background: #ffffff;
        box-shadow: 1px -2px 3px 0px rgba(153, 153, 153, 0.5);
        border-radius: 5px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        text-align: center;
        line-height: 66px;
      }
      .toList {
        display: inline-block;
        height: 55px;
        line-height: 55px;
        color: #333333;
      }
    }
    .content {
      background: #ffffff;
      box-shadow: 1px -2px 3px 0px rgba(153, 153, 153, 0.5),
        1px 2px 3px 0px rgba(153, 153, 153, 0.5);
      padding: 0 20px;
    }
    .topBtn {
      display: flex;
      height: 90px;
      justify-content: space-between;
      align-items: center;
      padding-right: 30px;
      .scoreName {
        span {
          font-size: 16px;
        }
        input {
          height: 40px;
          width: 300px;
          border: 0;

          border-radius: 5px;
          box-shadow: inset -1px -1px 3px 0px #2fc0e0,
            inset 1px 1px 3px 0px #2fc0e0;
          outline: none;
          // box-shadow: 0px 0px 2px 2px #a7f1fe;
        }
        input::placeholder {
          text-align: center;
        }
      }
      .Btn {
        button {
          height: 35px;
          width: 100px;
          border-radius: 4px;
          font-size: 16px;
          font-weight: 400;
          line-height: 35px;
          &:nth-child(1) {
            background-color: #e8f8fb;
            color: #2fc0e0;
          }
          &:nth-child(2) {
            margin-left: 21px;
            background: #2fc0e0;
            color: #ffffff;
          }
        }
      }
    }
  }
}
.tableContent {
  span {
    display: inline-block;
    // width: 42px;
    height: 20px;
    font-size: 14px;
    // font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 20px;
    margin-bottom: 12px;
  }
  .table {
    width: 100%;
    table {
      border-spacing: 0;
      border-collapse: collapse;
      // thead{

      // }
    }
    tr {
      border-spacing: 0;
      text-align: center;
      // height: 50px;
      line-height: 43px;
      td {
        border: 1px solid #e6ebff;
        font-size: 14px;
        color: #333333;
        font-weight: 500;
      }
    }
    tbody {
      span {
        font-size: 12px;
      }
      td {
        font-size: 12px;
      }
    }
  }
}
.table1,
.table2 {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  border-width: 0px;
  border-style: hidden;
  tr {
    height: 50px;
  }
}
.table2 {
  margin: 0;
  padding: 0;
}
.roleList {
  margin-top: 30px;
  height: 120px;
  span {
    // width: 70px;
    // height: 20px;
    font-size: 14px;
    // font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 20px;
  }
  .role {
    display: flex;
    margin-top: 10px;
    div {
      width: 135px;
      height: 45px;
      background: #eefff2;
      border-radius: 8px;
      margin-right: 32px;
      text-align: center;
      line-height: 45px;
      font-size: 12px;
      // font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
    }
  }
}
.showSetting {
  margin-top: 80px;
  // margin-bottom: 50px;
  padding-bottom: 50px;
  span {
    font-size: 14px;
    // font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 20px;
  }
  .settingTable {
    table {
      border-spacing: 0;
      border-collapse: collapse;
      thead {
        td {
          width: 61px;
          height: 70px;
          background: #f1f5ff;
          border: 1px solid #e6ebff;
          text-align: center;
        }
      }
      tbody {
        td {
          width: 61px;
          height: 51px;
          background: #ffffff;
          border: 1px solid #f1f5ff;
          text-align: center;
        }
      }
    }
  }
}
.el-dialog__body {
  padding: 0;
}
button {
  cursor: pointer;
}
</style>
